<script setup lang="ts">
import { reactive, onMounted } from "vue";

import SaveIcon from "~icons/ep/document-checked";

defineOptions({
  name: "TemplateSetting"
});

// 表单参数
const formData = reactive({
  name: "",
  region: "",
  date: "",
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});

// 页面加载时
onMounted(() => {
  //
});
</script>

<template>
  <el-form label-position="right" label-width="80px" :model="formData">
    <el-form-item label="字符">
      <el-input v-model="formData.name" />
      <el-alert type="info" size="small" show-icon :closable="false">
        <template #title>
          <p>补充注解</p>
        </template>
      </el-alert>
    </el-form-item>
    <el-form-item label="选项">
      <el-select v-model="formData.region" placeholder="请选择">
        <el-option label="选项一" value="shanghai" />
        <el-option label="选项二" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="时间选择">
      <el-date-picker
        v-model="formData.date"
        type="date"
        placeholder="请选择"
      />
    </el-form-item>
    <el-form-item label="开关">
      <el-switch v-model="formData.delivery" />
    </el-form-item>
    <el-form-item label="多选">
      <el-checkbox-group v-model="formData.type">
        <el-checkbox label="选项一" value="选项一" />
        <el-checkbox label="选项二" value="选项二" />
        <el-checkbox label="选项三" value="选项三" />
        <el-checkbox label="选项四" value="选项四" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="单选">
      <el-radio-group v-model="formData.resource">
        <el-radio label="选项一" value="选项一" />
        <el-radio label="选项二" value="选项二" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="多行文本">
      <el-input v-model="formData.desc" type="textarea" :rows="5" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default">
        <IconifyIconOffline :icon="SaveIcon" />
        <span class="ml-2">保存</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
.el-alert {
  margin-top: 5px;
}

.el-form {
  padding-bottom: 25px;
}
</style>
